<template>
  <div class="app-container">
    <xm-table ref="xmtable" :url='url'>
      <template v-slot:search>
        <el-input v-model="where.nickname" placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keypress.enter.native="table.where(where)" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click.native="table.where(where)" >搜索</el-button>
      </template>

      <!--表格主内容-->
      <template v-slot:table="slotProps">
        <el-table
                :key="slotProps.tableKey"
                v-loading="slotProps.listLoading"
                :data="slotProps.list"
                border
                highlight-current-row
                style="width: 100%;"
        >
          <el-table-column label="微信昵称">
            <template slot-scope="scope">
              {{ scope.row.nickname}}
            </template>
          </el-table-column>

          <el-table-column label="微信头像" width="120px">
            <template slot-scope="scope">
              <el-image
                      :src="scope.row.avatar_url"
                      fit="cover"
                      :preview-src-list="[scope.row.avatar_url]"
                      lazy
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>

          <el-table-column label="性别" width="150px">
            <template slot-scope="scope">
              <span v-if="+scope.row.gender == 1">男</span>
              <span v-else-if="+scope.row.gender == 2">女</span>
            </template>
          </el-table-column>

          <el-table-column label="国家">
            <template slot-scope="scope">
              <span>{{ scope.row.country }}</span>
            </template>
          </el-table-column>

          <el-table-column label="省份">
            <template slot-scope="scope">
              <span>{{ scope.row.province }}</span>
            </template>
          </el-table-column>

          <el-table-column label="城市">
            <template slot-scope="scope">
              <span>{{ scope.row.city }}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </xm-table>
  </div>
</template>

<script>
  import xmTable from "@/components/xmTable"
  //import { constants } from 'fs';

  export default {
    name: 'projectList',
    components: {
      xmTable,
    },
    data() {
      return {
        url: api.member,     //请求地址
        table: {},            //获取table内部方法
        where: {              //搜索用关键字
          nickname: ''
        },
        nowId: 0,              //当前id

        sizeForm: {
          nickname: '',
          avatar_url: '',
          gender: '',
          country: '',
          province: '',
          city: ''
        }
      }
    },
    created() {
      //vm.getprojectItem()
    },
    mounted() {
      const vm = this;
      vm.table = vm.$refs.xmtable
    },
    computed: {

    },
    methods: {
      // 获取数据接口
      async getprojectItem(id) {
        id = id || '0'
        const vm = this;
        let url = api.member + '/' + id
        vm.$axios.get(url)
                .then((res) => {
                  vm.sizeForm.nickname = res.nickname
                  vm.sizeForm.avatar_url = res.avatar_url
                  vm.sizeForm.gender = res.gender
                  vm.sizeForm.country = res.country
                  vm.sizeForm.province = res.province
                  vm.sizeForm.city = res.city
                })
      }
    }
  }
</script>

<style scoped>
  .btnLink {
    display: block;
    width:100%;
  }
</style>
